@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-notification-notificationPanel';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

.notificationPanelHeader {
  @include composite-var($notification-panel-header-container);

  position: relative;

  display: flex;
  flex-direction: column;

  border-bottom-color: $sys-neutral-decor-default;
  border-bottom-style: solid;

  &::before {
    pointer-events: none;
    content: '';

    position: absolute;
    top: 0;
    left: 0;

    box-sizing: border-box;
    width: 100%;
    height: calc(100% + $border-width-notification-panel-container);

    opacity: $opacity-a004;
    background-color: $sys-neutral-accent-default;
    border-radius: inherit;
  }
}
.notificationPanelChips {
  @include composite-var($notification-panel-header-chips);

  display: flex;
  align-items: center;
}

.notificationPanelHeaderFunctions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.notificationPanelHeadline {
  @include composite-var($notification-panel-header-headline);

  display: flex;
  align-items: center;
  color: $sys-neutral-text-main;
}

.notificationPanelTitle {
  flex: 1 1 auto;
  min-width: 0;
}

.notificationPanelBody {
  flex: 1 1 auto;
  min-height: 0;
}

.notificationPanelCard {
  &:last-of-type {
    border-bottom: none;
  }
}

.notificationPanelFooterButton {
  @include composite-var($notification-panel-button-container);

  cursor: pointer;

  flex-shrink: 0;

  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;

  color: $sys-neutral-text-light;

  background: none;
  border-color: $sys-neutral-decor-default;
  border-top-style: solid;
  border-right: none;
  border-bottom: none;
  border-left: none;
  outline: 0;
  outline-offset: 0;

  &:hover {
    color: $sys-neutral-text-support;
  }

  &:focus-visible {
    @include outline-inside-var($container-focused-s);

    color: $sys-neutral-text-support;
    border-color: transparent;
    outline-color: $sys-available-complementary;
  }

  &:active {
    color: $sys-neutral-text-main;
    border-color: $sys-neutral-decor-default;
  }
}

.wrapper {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scrollStub {
  height: calc($dimension-025m / 2);
  margin-top: calc($dimension-025m / -2);
  background: transparent;
}
